<template>
  <div class="app-container">
    <div class="change">
      <p>
        <span>用户名</span>
        <el-input v-model="tempData.username" :disabled="islook" class="userselect" type="text" placeholder="请输入用户名"/>
      </p>
      <p>
        <span>用户手机号</span>
        <el-input v-model="tempData.password" :disabled="islook" class="userselect" type="text" placeholder="请输入用户手机号"/>
      </p>
      <p>
        <span>权限</span>
        <el-select v-model="qx" placeholder="请选择权限" class="userselect" @change="changerole">
          <el-option v-for="item in quanxianlist" :key="item.zcid" :label="item.zcname" :value="item.zcid"></el-option>
        </el-select>
      </p>
      <p v-if="zongjianfenlei">
        <span>总监</span>
        <el-select v-model="tempData.zongjianid" placeholder="请选择总监" class="userselect">
          <el-option v-for="item in zongjianlist" :key="item.zid" :label="item.ajob" :value="item.zid"></el-option>
        </el-select>
      </p>
      <p v-if="gongsishow">
        <span>公司</span>
        <el-select v-model="tempData.gongsi" placeholder="请选择" class="userselect">
          <el-option v-for="item in gongsilist" :key="item.zid" :label="item.ajob" :value="item.zid"></el-option>
        </el-select>
      </p>
			<p v-if="chejianshow">
        <span>车间</span>
        <el-select v-model="tempData.chejian" placeholder="请选择车间" class="userselect" @change="changechejian">
          <el-option v-for="item in chejianlist" :key="item.id" :label="item.name" :value="item.id"></el-option>
        </el-select>
      </p>
			<!-- <p>
        <span>工段</span>
        <el-select v-model="tempData.gongduan" placeholder="请选择工段" class="userselect" @change="changegongduan">
          <el-option v-for="item in gongduanlist" :key="item.id" :label="item.name" :value="item.id"></el-option>
        </el-select>
      </p> -->
      <p v-if="banzushow">
        <span>班组</span>
        <el-select v-model="tempData.banzu" placeholder="请选择班组" class="userselect" @change="changebanzu">
          <el-option v-for="item in banzulist" :key="item.id" :label="item.name" :value="item.id"></el-option>
        </el-select>
      </p>
    </div>
		<div class="submits">
		  <el-button class="save" size="small" type="primary" :loading="loading" @click="save">保存</el-button>
		  <el-button class="nosave" size="small" type="info" @click="nosave">取消</el-button>
		</div>
  </div>
</template>

<script>
let templist = null;
import { addRenyuanGuanli,updateRenyuanGuanli,getAnquanMulu,getQuanxian,getAllzongjian } from '@/api/oneclassify'
export default {
  data(){
    return{
      tempData: {},
      loading: false,
      bumenlist: [],   //部门数据列表
      chejianlist: [], //车间级列表
      gongduanlist: [],//工段级列表
      banzulist: [],   //班组级列表
      zongjianfenlei: false,  //是否显示总监分类
      zongjianlist: [],    //获取总监分类
      gongsilist: [],    //获取总监分类
      //disable: true,   //是否禁用车间选择
      gongsishow: false, //公司是否显示
      banzushow: true,  //班组是否显示
      chejianshow: true, //车间是否显示
      quanxianlist: [],
      qx: '',  //权限name
      writeOradd: 0, //判断是0新增还是1修改
      islook: false
    }
  },
  mounted(){
    console.log(this.$route.params)
    // 获取权限分类
    this.getrole()
    // 获取所有总监分类
    this.getzongjian()
    if(this.$route.params.look){
      this.islook = true
    }else{
      this.islook = false
    }
    if(this.$route.params.options){
      this.writeOradd = 1
      this.tempData = JSON.parse(this.$route.params.options)
      this.qx = this.tempData.quanxian
      // 根据权限判断显示隐藏
      this.choseResult(this.tempData.quanxian)
      console.log(this.tempData)
      // 获取所有车间班组列表
      this.getList(this.tempData)
    }else{
      this.writeOradd = 0
      this.tempData = {}
      this.getList()
    }
  },
  methods:{
    /**
     * 获取权限
     */
    getrole(){
      getQuanxian({}).then(res => {
        console.log(res.data)
        this.quanxianlist = res.data
      })
    },
    // 获取总监分类
    getzongjian(){
      getAllzongjian({}).then(res => {
        console.log(res)
        const zj = res.data.filter(item => item.zlevel === '总监')
        this.zongjianlist = zj
        this.gongsilist = res.data.filter(item => item.zlevel === '公司')
      })
    },
    /**
     * 保存编辑人员信息
     */
    save(){
      // 如果对象为空，直接返回
      if(JSON.stringify(this.tempData) === '{}'){
        this.$message({
          message: '请填写相关信息！',
          type: 'warning'
        })
        return
      }
      this.loading = true
      /**
       * 判断如果权限为公司级,重置总监id,车间id,班组id
       * 判断如果权限为总监级,重置车间id,班组id
       * 判断如果权限为车间级,重置班组id
       */
      console.log(this.tempData.quanxian)
      if(this.tempData.quanxian === '公司'){
        this.tempData.zongjianid = ''
        this.tempData.chejian = ''
        this.tempData.banzu = ''
      }else if(this.tempData.quanxian === '总监'){
        this.tempData.chejian = ''
        this.tempData.banzu = ''
      }else if(this.tempData.quanxian === '车间'){
        this.tempData.banzu = ''
      }
      //0为新增操作
      if(this.writeOradd === 0){
        addRenyuanGuanli(this.tempData).then(res => {
          console.log(res)
          this.$message({
            message: res.message,
            type: 'success'
          })
          this.$router.go(-1)
        }).catch(() => {
          this.loading = false
        })
      }else{
        // 1是编辑修改操作
        delete this.tempData.insertTime
        delete this.tempData.updateTime
        delete this.tempData.deleteId
        updateRenyuanGuanli(this.tempData).then(res => {
          console.log(res)
          this.$message({
            message: res.message,
            type: 'success'
          })
          this.$router.go(-1)
        }).catch(() => {
          this.loading = false
        })
      }
      
    },
    nosave(){
      this.$router.go(-1)
    },
    // 切换权限分类
    changerole(e){
      console.log(e)
      // this.tempData.chejian = this.tempData.banzu = ''
      const list = this.quanxianlist.filter(item => item.zcid === e)[0]
      this.tempData.quanxian = list.zcname
      this.choseResult(list.zcname)
    },
    choseResult(name){
      if(name === '总监'){
        this.zongjianfenlei = true
        this.banzushow = false
        this.chejianshow = false
        this.gongsishow = false
      }else if(name === '公司'){
        this.gongsishow = true
        this.zongjianfenlei = false
        this.banzushow = false
        this.chejianshow = false
      }else if(name === '车间'){
        this.gongsishow = false
        this.banzushow = false
        this.chejianshow = true
      }else if(name === '班组'){
        this.gongsishow = false
        this.banzushow = true
        this.chejianshow = true
        this.zongjianfenlei = false
      }
    },
    /**
     * 选择车间分类，筛选工段分类
     */
    changechejian(e){
       console.log(e)
      //  this.tempData.banzu = ''
       console.log(templist.filter(item => item.id === e))
       this.banzulist = templist.filter(item => item.id === e)[0].childsList
       console.log('班组',this.banzulist)
    },
    // 选择工段分类，筛选班组分类
    // changegongduan(e){
    //    console.log(e)
    //    this.tempData.gongduan = e
    //   //  this.tempData.banzu = ''
    //    this.banzulist = this.gongduanlist.filter(item => item.id === e)[0].childsList
    //    console.log('班组',this.banzulist)
    // },
    changebanzu(e){
      console.log(e)
      // this.tempData.banzu = e
    },
    getList(arg){
      getAnquanMulu({}).then(res => {
        console.log(res)
        const temp = res.data
        templist = res.data
        if(this.writeOradd === 1){
          this.chejianlist = temp;
          // 更改工段为班组
          this.banzulist = templist.filter(item => item.id === this.tempData.chejian)[0].childsList
          // this.gongduanlist = templist.filter(item => item.id === this.tempData.chejian)[0].childsList
          // this.banzulist = this.gongduanlist.filter(item => item.id === this.tempData.gongduan)[0].childsList
        }else{
          this.chejianlist = temp; //车间级列表
        }
        
      })
    }
  }
}
</script>

<style scoped lang="scss">
  .submits {
	  display: flex;
		background: #fff;
	  padding: 20px 20px;
		border-radius: 8px;
		margin-top: 20px;
		// border-top: 1px solid #ccc;
	  justify-content: flex-end;
	  align-items: center;
	  > div {
	    width: 80px;
	    height: 32px;
	    text-align: center;
	    line-height: 32px;
	    color: #fff;
	    font-size: 14px;
	    border-radius: 4px;
	    margin-left: 30px;
	    cursor: pointer;
	  }
	  .save {
	    background: #18a05e;
	  }
	  .nosave {
	    background: #999;
	  }
	}
  .change {
	  display: flex;
	  flex-wrap: wrap;
	  background: #fff;
	  border-radius: 8px;
	  padding: 20px 0;
	  > p {
	    width: 33%;
	    font-size: 14px;
	    display: flex;
	    align-items: center;
	    color: #333;
	    /deep/.el-input__inner {
	      // width: inherit;
	      background: none;
	      height: 32px;
	      // line-height: 32px;
	      color: #333;
	      border: 1px solid rgba(0, 0, 0, 0.1);
	      padding: 0 25px;
	    }
	    /deep/.el-input__icon {
	      line-height: 32px;
	    }
	    .userselect {
	      // max-width: 250px;
	      flex: 1;
	    }
	
	    > span {
	      display: block;
	      width: 120px;
	      text-align: right;
	      padding-right: 15px;
	    }
	    > input {
	      width: inherit;
	      flex: 1;
	      height: 32px;
	      border-radius: 3px;
	      border: 1px solid rgba(0, 0, 0, 0.1);
	      padding-left: 10px;
	      color: #333;
	    }
	  }
	}
</style>